Fixes #1309 , moving away from the deprecated @import to @use.

Changes:

• moves from use of @import to @use
• changes paths used in import/use directives, removing leading slash:
  e.g. /styles/variables.scss to styles/variables.scss
• configures sass through astro's vite config so that future use of @import (an accidental regression) will break the build with appropriate message.

Status:

Done, I think. Ready for review.

[x] dev and build work locally and look fine.
[x] deploys to cloudflare through the normal github actions: https://p5web-sass-fix-beta.neillzero.workers.dev/
[x] looks ok deployed this way
[x] I ran a comparison of generated css files before-and-after and found minimal differences (no additional css duplication, for example).
[x] No more deprecation warnings from this source in npm run dev.

Testing:

All CSS files in dist/ - before and after

Locally ran astro build with npm run build on the current 2.0 with and without the PR, and compared all generated .css files.

• Result: same file sizes, slightly different names for about.whatever.css
• The all.css and slug.ZGkxnZFm.css contents are identical.
• The about.whatever.css differs only in ids and in section ordering.

 40K	./_astro/about.Cqki5N6P.css
 24K	./_astro/_slug_.ZGkxnZFm.css
 44K	./assets/all.css

A main worry was that the new approach would add repeats of css sections, bloating downloads. No file size increase here is good to see.

However, I understand that astro can also inline css into html pages. So i tested the generated sizes of those next.

dist/ dir - before and after

• The overall dist directory got smaller from 386M to 381M.

All html files in dist/ - before and after

• The large majority of files didn't change significantly in size as reported by du (uses 512 byte blocks).
• Looking at the english reference page sizes down to the byte, the large majority of these differ only in size only by a single digit of bytes.

CI including deployment

• Tested the "deploy beta to cloudflare" workflow on github CI, with a minimally-altered branch (to tweak wrangler.jsonc) - It built and deployed fine to cloudflare, and looks ok there: https://p5web-sass-fix-beta.neillzero.workers.dev/ . (github CI workflow logs here)

discussion (opinions)

While it's possible to rename the namespace when using @use,
So instead of:

@use "styles/variables.scss";
@media (min-width: variables.$breakpoint-tablet) {

We could write:

@use "styles/variables.scss as v";
@media (min-width: v.$breakpoint-tablet) {

but I suggest sticking with the full namespace (in this case variables) is less surprising, more self-descriptive, easier for find/find-replace, and not too long.

(Anyway, that can be decided and changed going fwd.)